<template>
	<view class="nav-module-content">
		<!-- <view class="navs-title">
			{{name}}
		</view> -->
		<view class="navs-list-box" v-for='(item,index) in list' :key='index' @click="toPages(item)">
			<view class="nav-info">
				<image :src='item.imageUrl' :style="{width: item.width,height:item.height}" mode=""></image><text>{{item.navName}}</text>
				<!-- <text v-if="item.directUrl==''" style="font-size:10rpx">升级中无法使用</text> -->
			</view>
			<view class="nav-right">
				<text class="cuIcon-right"></text>
			</view>
		</view>
		<!-- <view class="navs-list-box">
			<view class="nav-info">
				<image src="../../static/Qicon/xmy_icon.png" style="width: 36rpx;height: 36rpx;" mode=""></image><text>项目预算</text>
			</view>
			<view class="nav-right">
				<text class="cuIcon-right"></text>
			</view>
		</view> -->
	</view>
</template>

<script>
	export default{
		name:'nav-module',
		props:['data'],
		data(){
			return {
				list:[],
				name:''
			}
		},
		created() {
			this.list=this.data.list;
			this.name=this.data.name;
		},
		methods:{
			toPages(item){
				if(item.directUrl==''){
					uni.showToast({
						title:'功能在升级中，无法使用！',
						duration:2200
					})
					return;
				}else{
					uni.navigateTo({
						url:item.directUrl
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.nav-module-content{
		width: 100%;
		position: relative;
		height:auto;
		background:rgba(255,255,255,1);
		box-shadow:0rpx 2rpx 10rpx 0rpx rgba(139,165,205,0.17);
		border-radius:8rpx;
		margin-bottom: 24rpx;
		// justify-content: column;
		.navs-title{
			height: 86rpx;
			font-size:30rpx;
			font-family:PingFangSC-Regular,PingFang SC;
			font-weight:400;
			color:rgba(51,51,51,1);
			line-height:86rpx;
			padding:0 30rpx;
			position: relative;
			border-bottom: 2rpx solid #EBEBEB;
			&:after{
				position: absolute;
				width: 6rpx;
				height: 28rpx;
				content: '';
				background:rgba(64,122,224,1);
				top:30rpx;
				left: 16rpx;
				border-radius: 2rpx;
			}
		}
		.navs-list-box{
			display: flex;
			height: 88rpx;
			flex-direction: row;
			padding:0 24rpx;
			justify-content: flex-start;
			border-bottom: 2rpx solid #EBEBEB;
			&:last-child{
				border-bottom: none;
			}
			.nav-info{
				flex: 1;
			    align-self:flex-start;
				height: 84rpx;
				line-height: 88rpx;
				 // align-self: center;
				 vertical-align: middle;
				image{
					display: inline-block;
					vertical-align: middle;
					margin-right: 14rpx;
					
				}
				text{
					 vertical-align: middle;
				}
			}
			.nav-right{
				flex: 1;
				align-self: flex-start;
				text-align: right;
				line-height: 88rpx;
			}
		}
	}
</style>
